import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import "../css/OminiInfo.css"
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000/"
export default function OminiInfo() {

    let navpush = useNavigate()
    let uid = JSON.parse(sessionStorage.getItem("user"))._id
    let [roomls,setroomls] = useState([])
    let getroomls = async() => {
        let res = await axios.get(`rooms?uid=${uid}`)
        if (res.data.code == 200) {
            setroomls(res.data.ls)
        }
    }
    const formatMessageTime = (timeStr) => {
        const time = new Date(timeStr);
        const currentTime = new Date();
        const yesterday = new Date();
        yesterday.setDate(currentTime.getDate() - 1);
      
        const daysOfWeek = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const dayOfWeek = daysOfWeek[time.getDay()];
      
        if (time.toDateString() === currentTime.toDateString()) {
          return `${time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
        } else if (time.toDateString() === yesterday.toDateString()) {
          return '昨天';
        } else if (isSameWeek(time, currentTime)) {
          return dayOfWeek;
        } else {
          return time.toLocaleDateString();
        }
      };
      
      const isSameWeek = (date1, date2) => {
        const startOfWeek1 = new Date(date1);
        startOfWeek1.setDate(date1.getDate() - date1.getDay());
        const startOfWeek2 = new Date(date2);
        startOfWeek2.setDate(date2.getDate() - date2.getDay());
        return startOfWeek1.getTime() === startOfWeek2.getTime();
      };
    useEffect(() => {
        getroomls()
    }, [])
    useEffect(() => {
        let aallow = setInterval(() => {
            getroomls()
        }, 1000);
        return  () => {
            clearInterval(aallow)
        }
    }, [])
    return (
        <div className="info_main_box">
            <div className="label_info_box">
                <div className="label_info">
                    <p>消息</p>
                    <div className="three_info">
                        <div className="ltyp">
                            <div className="tbox" onClick={() => {
                                navpush("/wll")
                            }}>
                                <div className="timg" style={{backgroundColor:"rgb(223,189,142)"}}>
                                    <img src="https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E6%B6%88%E6%81%AF%E5%88%97%E8%A1%A8/%E8%B7%AF%E5%BE%84_5_2_u2596.png" alt=""/>
                                </div>
                                <span>物流消息</span>
                            </div>
                        </div>
                        <div className="ltyp">
                            <div className="tbox" onClick={() => {
                                navpush("/ntce")
                            }}>
                                <div className="timg" style={{backgroundColor:"rgb(78,255,182)"}}>
                                    <img src="https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E6%B6%88%E6%81%AF%E5%88%97%E8%A1%A8/u2600.png" alt=""/>
                                </div>
                                <span>通知消息</span>
                            </div>
                        </div>
                        <div className="ltyp">
                            <div className="tbox" onClick={() => {
                                navpush("/ati")
                            }}>
                                <div className="timg" style={{backgroundColor:"rgb(124,168,231)"}}>
                                    <img src="https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E6%B6%88%E6%81%AF%E5%88%97%E8%A1%A8/u2581.png" alt=""/>
                                </div>
                                <span>互动消息</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="info_clum_box">
                {roomls.map(item => {
                    return <div className="sinroombox" key={item._id} onClick={() => {
                        navpush(`/omibfo/${item._id}/${item.users.filter(item => item!==uid)[0]}`)
                    }}>
                        <div className="userhd1">
                            头像
                        </div>
                        <h3>{item.roomname.split(",").filter(item => item!==JSON.parse(sessionStorage.getItem("user")).username)}</h3>
                        <p>{item.messages.length!==0 && item.messages[item.messages.length-1].content}</p>
                        <p className="infotime">{ item.messages.length!==0 && formatMessageTime(item.messages[item.messages.length-1].timestamp)}</p>
                    </div>
                })}
            </div>
        </div>
    )
}
